<template>
  <div>
    <el-card>
      <el-row>
        <!--工具条-->
          <el-button @click="addNew(1,'首页轮播图')">增加</el-button>
          <!-- <el-button @click="addNew(2,'商城首页轮播图')">增加商城首页轮播图</el-button>
          <el-button @click="addNew(3,'头条轮播图')">增加头条轮播图</el-button> -->
      </el-row>
      <el-table
        ref="multipleTable"
        :data="reportListData"
        border
        stripe
        style="width: 100%"
        id="out-table"
        tooltip-effect="dark"
      >
        <el-table-column type="index"></el-table-column>
        <el-table-column prop="content" label="内容" width="120">
          <template slot-scope="scope">
            <span v-if="!scope.row.update">{{ scope.row.content }}</span>
            <el-input
              v-model="scope.row.content"
              v-if="scope.row.update"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="image" label="图片" width="240">
          <template slot-scope="scope">
            <el-image
              v-if="scope.row.image"
              style="width: 120px; height: 60px"
              :src="scope.row.image"
              :preview-src-list="srcList"
              fit="contain"
              @click="checkimg(scope.row.image)"
            ></el-image>
            <a style="color: #1890ff" @click="changeImg(scope.row, 'image')"
              >更换图片</a
            >
          </template>
        </el-table-column>

        <el-table-column prop="labs" label="标签">
          <template slot-scope="scope">
            <span v-if="!scope.row.update">{{ scope.row.labs }}</span>
            <el-input
              v-model="scope.row.labs"
              v-if="scope.row.update"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="price" label="价格">
          <template slot-scope="scope">
            <span v-if="!scope.row.update">{{ scope.row.price }}</span>
            <el-input
              v-model="scope.row.price"
              v-if="scope.row.update"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="degree" label="满意度">
          <template slot-scope="scope">
            <span v-if="!scope.row.update">{{ scope.row.degree }}</span>
            <el-input
              v-model="scope.row.degree"
              v-if="scope.row.update"
             style="width: 80px;"></el-input><span>  %</span>
          </template>
        </el-table-column>
        <el-table-column prop="personNum" label="人数">
          <template slot-scope="scope">
            <span v-if="!scope.row.update">{{ scope.row.personNum }}</span>
            <el-input
              v-model="scope.row.personNum"
              v-if="scope.row.update"
            ></el-input>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="240">
          <template slot-scope="scope">
            <el-button
              v-if="scope.row.disabled == 0"
              type="danger"
              size="mini"
              @click="openClose(scope.row, 1)"
              >禁用</el-button
            >
            <el-button
              v-if="scope.row.disabled == 1"
              type="success"
              size="mini"
              @click="openClose(scope.row, 0)"
              >启用</el-button
            >
            <el-button
              type="success"
              size="mini"
              @click="scope.row.update = !scope.row.update"
              >修改</el-button
            >
            <el-button
              type="success"
              size="mini"
              @click="saveAndUpdate(scope.row)"
              >保存</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <!-- <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchfrom.pageNo"
        :page-sizes="[2, 5, 10, 15]"
        :page-size="searchfrom.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination> -->
    </el-card>

    <el-upload
      class="avatar-uploader"
      :data="params"
      :action="upload.url"
      :show-file-list="false"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
      :on-error="uploadFile"
    >
      <img v-show="false" />
    </el-upload>
  </div>
</template>
<script>

export default {
  name: "loopImage",
  data() {
    return {
      searchfrom: {
        pageNo: 1,
        pageSize: 10
      },
      total: 0,
      reportListData: [],
      srcList: [""],
      currentInfo: {},
      upload: {
        url: "",
        token: "",
        domain: "",
      },
      params: {},
      rows: {},
      imgName: "",
    };
  },
  created() {
    this.getreportList();
    this.qiNiuYun();
  },
  methods: {
    addNew(type,title){
      let obj={id:null,disabled: 0,labs: "",image: "",content: "",price: 0,degree:"98",personNum:"19000",update:true};
      this.reportListData.push(obj);
    },
    openClose(rows, open) {
      rows.disabled = open;
      this.saveAndUpdate(rows);
    },
    changeImg(rows, imgName) {
      document.getElementsByClassName("el-upload__input")[0].click();
      this.rows = rows;
      this.imgName = imgName;
    },
    uploadFile() {
      this.qiNiuYun();
      this.$message.error("上传失败，请重试");
    },
    qiNiuYun() {
      this.$http.post("/userFile/qiNiuUpload", {}).then((res) => {
        console.log(res);
        this.upload.token = res.data.data.token;
        this.upload.domain = res.data.data.domain;
        this.upload.url = res.data.data.upload_url;
        this.params.token = res.data.data.token;
        console.log(this.upload);
      });
    },
    saveAndUpdate(rows) {
      if(rows.degree>100)
        this.$message.success("满意度错误");
        rows.degree=rows.degree/100;
        rows.labs= JSON.stringify(rows.labs.split(","));
      this.$http.post("/manage/conf/editProject", rows).then((res) => {
        if (res.data.status == 1) this.getreportList();
        this.$message.success(res.data.message);
      });
    },
    beforeAvatarUpload(file) {
      this.params.key = new Date().getTime(); //file.name;
    },
    handleAvatarSuccess(res, file) {
      this.rows[this.imgName] = this.upload.domain + res.key;
    },
    showUpdateMask(data) {
      this.currentInfo = data;
    },
    searchApproveList() {
      this.searchfrom.pageNo = 1;
      this.getreportList();
    },
    checkimg(img) {
      this.srcList = [img];
    },
    queryReportImages(data) {
      console.log(data);
    },
    handleClick(tab, event) {
      if (tab.name == "first") {
        this.searchfrom.queryType = 1;
      } else if (tab.name == "second") {
        this.searchfrom.queryType = 2;
      } else {
        this.searchfrom.queryType = 3;
      }
      this.searchfrom.pageNo = 1;
      this.getreportList();
    },

    getreportList() {
      this.$http.post("/manage/conf/projectList", this.searchfrom).then((res) => {
        console.log(res);
        if (res.data.status == 1) {
          console.log(res.data);
          res.data.data.list.forEach((item) => {
            item.update = false;
            if(item.labs!=''){
              let str="";
              JSON.parse(item.labs).forEach((lab)=>{ str=str+","+lab; })
              item.labs=str.substring(1);
            }
          });
          this.reportListData = res.data.data.list;
        }
      });
    },
    searchUserList() {
      // this.searchfrom.createDate = this.formatTime(this.value1);
      this.searchfrom.pageNo = 1;
      this.getreportList();
    },
    // 监听 pagesize 的变化
    handleSizeChange(newSize) {
      // 把最新的 pagesize 赋值给 this.queryinfo
      this.searchfrom.pageSize = newSize;
      this.getreportList();
    },
    // 监听 页码值 的变化
    handleCurrentChange(newPageNum) {
      console.log(newPageNum);
      this.searchfrom.pageNo = newPageNum;
      this.getreportList();
    }
  },
};
</script>
<style scope>
 .el-tabs__header {
   margin-bottom: 0px !important;
 }
</style>
